<template>
    <div>
        <div class="app-container">
            <el-button icon="el-icon-plus" type="primary" round  @click="insertSpec">添加</el-button>
        </div>
        <el-table
            :data="spec"
            border
            style="width: 100%">
            <el-table-column
            prop="id"
            label="ID">
            </el-table-column>
            <el-table-column
            prop="name"
            label="名称">
            </el-table-column>
            <el-table-column
            prop="description"
            label="描述">
            </el-table-column>
            <el-table-column
            prop="unit"
            label="单位">
            </el-table-column>
            <el-table-column
            prop="standard"
            label="标准">
            </el-table-column>
            <el-table-column
            label="操作"
            width="180">
                <template slot-scope="scope">
                    <el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row.id)" >编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="delet(scope.row.id,scope.row.name)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        @current-change="goto"
        :page-size="5"
        layout="prev, pager, next"
        :total="total">
        </el-pagination>
    <insert-spec ref="insetSpec"  @refresh="goto"></insert-spec>
    <edit-spec></edit-spec>
    </div>
</template>

<script>
import http from '@/utils/request';
import InsertSpec from '@/components/SpecKey/InsertSpec.vue'
export default {
    name: 'ThreeIndex',
    components:{
      InsertSpec  
    },
    data() {
        return {
            spec: {},
            total: '',
            specData:{},
            current: ''
        };
    },

    mounted() {
        this.goto()
    },

    methods: {
        goto(pageNum=1){
            http.get(`/spec?pageNum=${pageNum}`)
            .then(res => {
                console.log(res.data.data);
                console.log(res.data.data.current);
                //console.log(res.data.data.total);
                this.spec=res.data.data.data
                this.total=res.data.data.total
                this.current=res.data.data.current
            })
        },
        insertSpec(){
            this.$refs.insetSpec.$data.dialogTableVisible = true  
            this.$refs.insetSpec.$data.current=this.current  
        },
        async delet(id,name){
            try {
                await this.$confirm(`你确定要删除 ${name} 吗?`, '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                // 代码能下来，表示用户点击了确认按钮
                const s = await http.delete(`/spec/${id}`)
                // 给用户一个提示的消息
                this.$message({
                    message: '数据删除成功',
                    type: 'success'
                })
                //刷新再查询
                this.goto(this.current)
                }catch(err) {
                console.log(err)
                }
        },
        
            
        edit(id){
            this.$router.push({
                path:'/spec/spec-edit',
                query:{id}
            })
        },
        
    },
};
</script>

<style lang="scss" scoped>

</style>